<template>
    <div class="common-layout">
        <el-container>
            <el-container>
                <el-aside :width="currentWidth">
                    <SlideMenu :isCollapse="isCollapse" :menus="menus"></SlideMenu>
                </el-aside>
                <el-container>
                    <el-header>
                        <el-icon :class="abc" size="30" @click="iconHandle">
                            <Fold></Fold>
                        </el-icon>
                        <div class="toolbar">
                            <el-dropdown>
                                <el-icon size="25" style="margin-right: 8px; margin-top: 1px">
                                    <avatar />
                                </el-icon>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>个人中心</el-dropdown-item>
                                        <el-dropdown-item>修改头像</el-dropdown-item>
                                        <el-dropdown-item>注销</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <span>莉莉</span>
                        </div>
                    </el-header>
                    <el-main>
                        <RouterView></RouterView>
                    </el-main>
                    <el-footer>
                        <el-row justify="center" align="middle" class="rowOne">
                            <el-col :span="24">
                                <div class="bq">Copyright © 2023 就爱信息科技有限公司. 版权所有. </div>
                            </el-col>
                        </el-row>
                        <el-row justify="center" align="middle">
                            <el-col :span="24">
                                <a href="https://beian.miit.gov.cn/">闽ICP备35084260号-1</a>&nbsp;&nbsp;
                                <a
                                    href="https://www.beian.gov.cn/portal/recordQuery?token=165efc94-dd29-4f8d-bde0-f4e872a9ff47#">
                                    <el-image :src="imgHref"></el-image>

                                    <span>闽公网安备 33010602011771号</span>
                                </a>
                            </el-col>
                        </el-row>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import SlideMenu from './MenuBar/Index.vue';
import { ref, reactive, computed } from 'vue'
import routes from '../router/routes'

const isCollapse = ref(false);
const imgHref = ref('../../public/ghs.png')
const currentWidth = computed(() => {
    return isCollapse.value ? 64 + 'px' : 200 + "px"
})

function convertPath(arr, parentPath) {
    // 定义一个空数组
    let list = [];

    // 处理第一个路由
    arr.forEach(item => {
        let tmp = {
            path: item.path,
            meta: item.meta ? item.meta : { icon: 'setting', title: '不知道的标题' }
        }
        // console.log(parentPath);
        // 就是当传入的路径path不为空时，就将其叠加到
        if (parentPath && tmp.path) {
            // console.log('999');
            tmp.path = parentPath + '/' + tmp.path
        }

        // 当有下级节点时，递归调用convertPath函数，传入下级路由（是个数组），并且传入当前路由的路径
        if (item.children && item.children.length > 0) {
            let children = convertPath(item.children, item.path)
            if (children.length > 0) {
                tmp.children = children
            }
        }



        // 将处理好的路由插入到空数组中
        list.push(tmp)
    })

    return list;
}

function processHidden(arr) {
    let list = [];
    arr.forEach(item => {
        let obj = ''
        // 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
        if (item.meta && item.meta.hidden) {
            // 当前路由设置为隐藏，且有子节点的情况下，提取第一个子节点，否则当前的路由项obj表示为''
            if (item.children && item.children.length > 0) {
                let children = item.children[0]
                obj = children
            }

        } else {
            obj = item
        }

        // 排除obj为空的情况''
        if (obj) {
            // 再对可能path为空的情况下处理下下
            if (!obj.path) {
                obj.path = '/'
            }
            list.push(obj)
        }


    })

    return list;
}

// 将导入进来的路由，转换成菜单数据
const menus = computed(() => {
    //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
    let list = convertPath(routes, '')
    // console.log(list);

    let menuList = processHidden(list)

    console.log(menuList);
    //2、返回处理好的菜单栏数据
    return menuList
})
const abc = reactive({
    collapseIcon: false
})

const iconHandle = function () {
    abc.collapseIcon = !abc.collapseIcon
    isCollapse.value = !isCollapse.value
}
</script>
<style scoped>
.el-header {
    background-color: rgb(160, 160, 160);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.el-aside {
    background-color: #545c64;
    height: calc(100vh - 0vh);
    overflow: hidden;
    transition: width 0.15s
}

.el-main {
    background-color: gray;
}

.el-footer {
    background-color: rgb(160, 160, 160);
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    color: white !important;
}

.el-footer a {
    text-decoration: none;
    color: white !important;


}

.collapseIcon {
    transform: rotate(-90deg);
}

.el-col-24 {
    flex: 0 0 auto
}

.el-image {
    vertical-align: top;
}

.rowOne {
    margin-top: 9px;
}

.toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
</style>
  